<template>
  <el-dialog
    v-model="drawer"
    :title="drawerProps.title"
    width="500"
    @close="closeDialog"
  >
    <div class="protocolBody">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="公司名称" prop="company">
          <el-input
            v-model="ruleForm.company"
            clearable
            placeholder="请输入公司名称"
          />
        </el-form-item>

        <el-form-item label="联系人姓名" prop="contacts">
          <el-input
            v-model="ruleForm.contacts"
            clearable
            placeholder="请输入联系人姓名"
          />
        </el-form-item>

        <el-form-item label="联系人电话" prop="phone">
          <el-input
            v-model="ruleForm.phone"
            clearable
            placeholder="请输入联系人电话"
          />
        </el-form-item>

        <el-form-item label="营业执照" prop="certificate">
          <input
            type="file"
            accept="image/*"
            ref="upLoadImgRef"
            v-show="false"
            @change="changeUploadFiles"
          />

          <div class="uploadImg" @click="upload" v-if="!ruleForm.certificate">
            <el-icon :size="20">
              <Plus />
            </el-icon>
          </div>

          <div class="uploadimgno" v-else>
            <el-image
              :src="ruleForm.certificate"
              :zoom-rate="1.2"
              :max-scale="7"
              :preview-src-list="[ruleForm.certificate]"
              :min-scale="0.2"
              fit="cover"
            />
            <div class="delImgOne">
              <el-icon color="#409efc" class="no-inherit" @click="remove">
                <CloseBold />
              </el-icon>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="开始日期" prop="date1">
          <el-date-picker
            value-format="YYYY-MM-DD"
            v-model="ruleForm.date1"
            type="date"
            placeholder="请选择开始日期"
            :size="size"
          />
        </el-form-item>

        <el-form-item label="到期日期" prop="date2">
          <el-date-picker
            value-format="YYYY-MM-DD"
            v-model="ruleForm.date2"
            type="date"
            placeholder="请选择到期日期"
            :size="size"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="tsx" name="settingDialog">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { uploadImgApi, setcustomerApi } from "@/api/modules/login";
import { reactive } from "vue";
const drawer = ref(false);
const size = ref<"default" | "large" | "small">("default");
const ruleFormRef = ref();
// const hasImgs = ref(false);
const upLoadImgRef = ref();
const emits = defineEmits(["closeDialog"]);

const ruleForm = ref({
  company: "",
  code: "",
  contacts: "",
  phone: "",
  certificate: "",
  date1: "",
  date2: "",
});

const rules = reactive<any>({
  company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  contacts: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
  phone: [{ required: true, message: "请输入联系人电话", trigger: "blur" }],
  //   certificate: [{ required: true, message: "请上传图片", trigger: "change" }],
  date1: [{ required: true, message: "请选择开始日期", trigger: "change" }],
  date2: [{ required: true, message: "请选择到期日期", trigger: "change" }],
});
const closeDialog = () => {
  console.log("关闭弹窗");
  emits("closeDialog");
};

const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (ruleForm.value.certificate == "") {
        ElMessage.warning("请上传营业执照");
        return;
      }
      if (drawerProps.value.title == "新增客户") {
        try {
          const par = {
            ...ruleForm.value,
          };
          console.log("传参", par);
          const res: any = await setcustomerApi(par);
          console.log("res", res);
          if (res.code == 200) {
            ElMessage.success("新增成功");
            drawer.value = false;
            drawerProps.value.getTableList();
          }
        } catch (error) {}
      } else {
        try {
          const par = {
            id: drawerProps.value.id,
            pid: drawerProps.value.pid,
          };
          const res: any = await editOrganizeApi(par);
          if (res.code == 200) {
            ElMessage.success("修改成功");
            drawer.value = false;
            drawerProps.value.getList();
          }
        } catch (error) {}
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const tableData2 = ref([]);

const cancel = () => {
  drawer.value = false;
};

const upload = () => {
  upLoadImgRef.value.click();
};

const file = ref();
/**
 *@use 点击触发上传文件
 */
const changeUploadFiles = async (e: any) => {
  file.value = e.target.files;
  // 判断是否是图片类型
  if (!/^image\/\w+/.test(file.value[0].type)) {
    ElMessage({
      message: "请上传图片格式的文件",
      type: "warning",
    });
    return;
  }
  //   if (!file.value) {
  //     ElMessage({
  //       message: "请先上传文件",
  //       type: "warning",
  //     });
  //     return;
  //   }

  try {
    const res: any = await uploadImgApi({ file: file.value[0] });
    if (res.code == 200) {
      ElMessage.success("上传成功");
      console.log("营业执照的地址", res.data);
      ruleForm.value.certificate = res.data;
      //   hasImgs.value = true;
    } else {
      ElMessage.warning("系统繁忙，请稍后再试");
    }
  } catch (error) {}
};

const remove = () => {
  ruleForm.value.certificate = "";
  //   hasImgs.value = false;
};

const drawerProps = ref<any>({
  isView: false,
  title: "",
  row: {},
});

// 接收父组件传过来的参数
const acceptParams = (params: any) => {
  // getProtocolList();
  // resetForm(ruleFormRef.value);
  drawerProps.value = params;
  drawer.value = true;

  console.log("新增", drawerProps.value);

  if (drawerProps.value.titles == "修改") {
    // ruleForm.value.title = drawerProps.value.title;
  } else {
    ruleForm.value.company = "";
    ruleForm.value.code = "";
    ruleForm.value.contacts = "";
    ruleForm.value.phone = "";
    ruleForm.value.certificate = "";
    ruleForm.value.date1 = "";
    ruleForm.value.date2 = "";
  }
};

defineExpose({
  acceptParams,
});
</script>
<style lang="scss" scoped>
.option-input {
  width: 100%;
  margin-bottom: 8px;
}
.uploadImg {
  width: 100px;
  height: 100px;
  border: 1px dashed #cdd0d6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.uploadImg:hover {
  color: #409eff;
  border: 1px dashed #409eff;
  cursor: pointer;
}
.uploadimgno {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  .delImgOne {
    margin-left: 10px;
    cursor: pointer;
  }
}
.protocolBody {
  max-height: 600px;
}

.el-form-item__label-wrap {
  margin-left: 0px !important;
}
.el-form-item--default {
  margin-bottom: 0px !important;
}
</style>
